<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px" @submit.native.prevent>
      <el-form-item label="编码类型" prop="codetype">
        <el-input
          v-model="queryParams.codetype"
          placeholder="请输入编码类型"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="编码名称" prop="codename">
        <el-input
          v-model="queryParams.codename"
          placeholder="请输入编码名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button  icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        <!--        <el-button icon="el-icon-question" size="mini" @click="()=>utils.openHelp(this,'')">帮助</el-button>-->
      </el-form-item>
    </el-form>


    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['system:crccode:add']"
        >新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button

          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['system:crccode:edit']"
        >修改
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button

          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['system:crccode:remove']"
        >删除
        </el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
    <el-table
      v-loading="loading"
      ref="table"
      stripe border
      :data="crccodeList"
      row-key="id"
      @expand-change="expandChange"
      @selection-change="handleSelectionChange"
      @row-dblclick="handleUpdate"
      
      @row-contextmenu="(row,column,e)=>utils.rightBtn(row,column,e,this,'table')">
      <el-table-column type="selection" width="60" align="center"/>
      <el-table-column type="index" label="序号" width="55" align="center">
        <template slot-scope="scope">
          <span>{{ utils.serialNumber(scope,queryParams) }}</span>
        </template>
      </el-table-column>

      <el-table-column type="expand" width="80" label="详细信息">
        <template slot-scope="scope">
          <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <el-button
                type="primary"
                icon="el-icon-plus"
                size="mini"
                @click="subHandleAdd(scope.row)"
                v-hasPermi="['system:crccode:add']"
              >新增
              </el-button>
            </el-col>
          </el-row>
          <el-table
            ref="subTable"
            stripe border
            :data="scope.row.subData"
            v-loading="scope.row.loading"
            @row-dblclick="subHandleUpdate">
            <el-table-column label="编码类型" align="center" prop="codetype"/>
            <el-table-column label="编码值" align="center" prop="codevalue"/>
            <el-table-column label="编码名称" align="center" prop="codename"/>
            <el-table-column label="备注" align="center" prop="memo"/>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click="subHandleUpdate(scope.row)"
                  v-hasPermi="['system:crccode:edit']"
                >修改
                </el-button>
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  @click="subHandleDelete(scope.row)"
                  v-hasPermi="['system:crccode:remove']"
                >删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column label="编码类型" align="center" prop="codetype"/>
      <el-table-column label="编码名称" align="center" prop="codename"/>
      <el-table-column label="备注" align="center" prop="memo"/>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['system:crccode:edit']"
          >修改
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['system:crccode:remove']"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改数据字典对话框 -->
    <el-dialog :title="title" width="500px" :top="scrollTop" v-dialog-drag :visible.sync="open" :modal="false"
               :appendToBody="false" :close-on-click-modal="false">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="编码类型" prop="codetype">
          <el-input v-model="form.codetype" placeholder="请输入编码类型"/>
        </el-form-item>
        <el-form-item label="编码名称" prop="codename">
          <el-input v-model="form.codename" placeholder="请输入编码名称"/>
        </el-form-item>
        <el-form-item label="系统预设" prop="prop1">
          <el-input v-model="form.prop1" placeholder="请输入系统预设"/>
        </el-form-item>
        <el-form-item label="备注" prop="memo">
          <el-input v-model="form.memo" placeholder="请输入备注"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">保 存</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 子表添加或修改数据字典对话框 -->
    <el-dialog :title="subTitle" :visible.sync="subOpen" :modal="false" :appendToBody="false" v-dialog-drag
               width="500px" :top="scrollTop" :close-on-click-modal="false">
      <el-form ref="subForm" :model="subForm" :rules="subRules" label-width="80px">
        <el-form-item label="编码类型" prop="codetype">
          <el-input v-model="subForm.codetype" disabled placeholder="请输入编码类型"/>
        </el-form-item>
        <el-form-item label="编码名称" prop="codename">
          <el-input v-model="subForm.codename" placeholder="请输入编码名称"/>
        </el-form-item>
        <el-form-item label="编码值" prop="codevalue">
          <el-input v-model="subForm.codevalue" placeholder="请输入编码值"/>
        </el-form-item>
        <el-form-item label="备注" prop="memo">
          <el-input v-model="subForm.memo" placeholder="请输入备注"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="subSubmitForm">保 存</el-button>
        <el-button @click="subCancel">取 消</el-button>
      </div>
    </el-dialog>
    <div v-show="exportMenu">
      <ul id="exportMenu" class="exportMenu">
        <li class="exportMenu__item" @click="()=>utils.exportFiles('1',this,'table')"><i class="el-icon-document-remove"></i>导出选中项成XLSX</li>
        <li class="exportMenu__item" @click="()=>utils.exportFiles('2',this,'table')"><i class="el-icon-document"></i>导出本页成XLSX</li>
        <li class="exportMenu__item" @click="()=>utils.exportFiles('3',this,'table')"><i class="el-icon-document-copy"></i>导出所有项成XLSX</li>
      </ul>
    </div>

    <el-dialog title="选择要导出的列" :visible.sync="exportFile" :modal="false" :appendToBody="false" v-dialog-drag
               width="600px" :top="scrollTop" @close="()=>utils.closeExportFile(this)">
      <el-row>
        <el-col :offset="1" :span="5" style="margin-bottom: 10px">
          <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="(val)=>utils.handleCheckAllChange(val,this,codeAll)">全选
          </el-checkbox>
        </el-col>
      </el-row>
      <el-checkbox-group v-model="queryParams.exportColumnName" @change="(val)=>utils.handleCheckedCitiesChange(val,this,codeAll)">
        <el-row>
          <el-col :offset="1" :span="5" style="margin-bottom: 10px">
            <el-checkbox label="codetype">编码类型</el-checkbox>
          </el-col>
          <el-col :offset="1" :span="5" style="margin-bottom: 10px">
            <el-checkbox label="codevalue">编码值</el-checkbox>
          </el-col>
          <el-col :offset="1" :span="5" style="margin-bottom: 10px">
            <el-checkbox label="codename">编码名称</el-checkbox>
          </el-col>
          <el-col :offset="1" :span="5" style="margin-bottom: 10px">
            <el-checkbox label="memo">备注</el-checkbox>
          </el-col>
        </el-row>
      </el-checkbox-group>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleExport">保 存</el-button>
        <el-button @click="exportFile = false">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>

  import {listCode, getCode, delCode, addCode, updateCode, exportCode} from "@/api/system/crccode";

  export default {
    name: "Code",
    components: {},
    data() {
      return {
        // 遮罩层
        loading: false,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 数据字典表格数据
        crccodeList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          codename: null,
          codetype: 'System',
          exprotDataSize: null,
          exportColumnName: [],
          exportCheckData: [],
        },
        queryParams2: {
          pageNum: 1,
          pageSize: 1000,
          codename: null,
          codetype: null,
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          codetype: [
            {required: true, message: "编码类型不能为空", trigger: "blur"}
          ],
          codename: [
            {required: true, message: "编码名称不能为空", trigger: "blur"}
          ]
        },
        // 子表弹出层标题
        subTitle: "",
        // 子表是否显示弹出层
        subOpen: false,
        // 子表表单参数
        subForm: {},
        // 子表表单校验
        subRules: {
          codetype: [
            {required: true, message: "编码类型不能为空", trigger: "blur"}
          ],
          codename: [
            {required: true, message: "编码名称不能为空", trigger: "blur"}
          ],
          codevalue: [
            {required: true, message: "编码值不能为空", trigger: "blur"}
          ]
        },
        // 子表选中数组
        subIds: [],
        // 子表非单个禁用
        subSingle: true,
        // 子表非多个禁用
        subMultiple: true,
        scrollTop: null,
        exportMenu: false,
        exportFile: false,
        checkAll: false,
        isIndeterminate: false,
        codeAll:["codetype", "codevalue", "codename", "memo"],
      };
    },
    created() {
      this.getList();
    },
    methods: {

      /** 查询数据字典列表 */
      getList() {
        this.loading = true;
        this.queryParams.codetype = this.queryParams.codetype ? this.queryParams.codetype : 'System'
        listCode(this.queryParams).then(response => {
          this.crccodeList = response.rows;
          this.total = response.total;
          this.loading = false;
        }).catch(err =>{
          this.loading = false;
        });
      },
       expandChange(row,expandedRows) {
         if(!row.expandShow){
          this.$set(row, 'loading', true);
          this.queryParams2.codetype = row.codetype
          listCode(this.queryParams2).then(response => {
            row.subData = response.rows;
            this.$set(row, 'loading', false);
            this.$set(row, 'expandShow', true);
          }).catch(err =>{
            this.$set(row, 'loading', false);
          });
        }


        setTimeout(() => {
          this.$set(row, 'loading', false);
        }, 1000)
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          codetype: null,
          parentcode: null,
          codename: null,
          prop1: null,
          memo: null
        };
        this.resetForm("form");
        this.queryParams.exprotDataSize = null;
        this.queryParams.exportColumnName = [];
        this.queryParams.exportCheckData = [];
      },
      // 子表取消按钮
      subCancel() {
        this.subOpen = false;
        this.subReset();
      },
      // 子表表单重置
      subReset() {
        this.subForm = {
          codetype: null,
          parentcode: null,
          codename: null,
          codevalue: null,
          prop1: null,
          memo: null
        };
        this.resetForm("subForm");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
        this.single = selection.length !== 1
        this.multiple = !selection.length
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.form.parentcode = 'System';
        this.open = true;
        this.title = "添加数据字典";
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        const id = row.id || this.ids[0];
        getCode(id).then(response => {
          this.form = response.data;
          this.open = true;
          this.title = "修改数据字典";
        });
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.id) {
              updateCode(this.form).then(response => {
                this.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              });
            } else {
              addCode(this.form).then(response => {
                this.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              });
            }
          }
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        var information = "是否确认删除所选数据项?";
        var ids = row.id ? [row.id] : this.$refs.table.selection.map(item => item.id);
        this.$confirm(information, "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function () {
          return delCode(ids);
        }).then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        })
      },

      /** 子表新增按钮操作 */
      subHandleAdd(row) {
        this.subReset();
        this.subForm.codetype = row.codetype;
        this.subForm.parentcode = row.codetype;
        this.subOpen = true;
        this.subTitle = "添加子表数据字典";
      },
      /** 子表修改按钮操作 */
      subHandleUpdate(row) {
        this.subReset();
        getCode(row.id).then(response => {
          this.subForm = response.data;
          this.subOpen = true;
          this.subTitle = "修改子表数据字典";
        });
      },
      /** 子表提交按钮 */
      subSubmitForm() {
        this.$refs["subForm"].validate(valid => {
          if (valid) {
            if (this.subForm.id) {
              updateCode(this.subForm).then(response => {
                this.msgSuccess("修改成功");
                this.subOpen = false;
                this.expandChange(this.getRow(this.subForm.codetype))
              });
            } else {
              addCode(this.subForm).then(response => {
                this.msgSuccess("新增成功");
                this.subOpen = false;
                this.expandChange(this.getRow(this.subForm.codetype))
              });
            }
          }
        });
      },
      /** 子表删除按钮操作 */
      subHandleDelete(row) {
        this.$confirm('是否确认删除编码类型为"' + row.codetype + '"的数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function () {
          return delCode([row.id]);
        }).then(() => {
          this.msgSuccess("删除成功");
          this.expandChange(this.getRow(row.codetype))
        })
      },
      getRow(codeType){
        return this.crccodeList.find((item)=> {
          if (item.codetype == codeType){
            item.expandShow = false
            return item
          }
        })
      },
      /** 导出按钮操作 */
      handleExport() {
        this.utils.handleExport(this,'table',this.crccodeList,'codetype',exportCode);
      },
    },
    mounted() {
      this.utils.mounteds(this);
    },
    destroyed() {
      this.utils.destroyeds(this);
    }
  };
</script>
